<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="misapplication-tap-highlight" content="no" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="MobileOptimized" content="320" />
  <link rel="stylesheet" href="cs.css">
  <title>QmSdk-Photos</title>
</head>

<body>
  <div class="imgBox"></div>

  <div class="info" style="margin-top: 1em;">
    <p>点击图片查看大图</p>
    <p>单击大图退出预览</p>
  </div>

  <script src="../qmsdk.js"></script>
  <script>
    let imgs = [
      "https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=376303577,3502948048&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1728637936,3151165212&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=473647396,2784348303&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3510959053,1732477822&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3564704490,2495180166&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3935451089,3705000739&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1318583208,3261454487&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1502668894,4077763049&fm=193&f=GIF",
    ];

    (function () {
      let imgBox = document.querySelector(".imgBox");
      imgs.map((value, index) => {
        let img = document.createElement("img");
        img.setAttribute("src", value);
        img.setAttribute("onclick", "showPhotos(" + index + ")");
        imgBox.appendChild(img);
      })
    })()

    function showPhotos(index) {
      qmSdk.showPhotos({
        imgs,
        index,
        loop: true,
        onLongPress: (res) => {
          console.log("长按图片", JSON.stringify(res));
          let actionbuttons = [{
            title: "下载"
          }];
          let actionstyle = {
            title: "确定要下载这张图片吗?",
            cancel: "取消",
            buttons: actionbuttons
          };

          // 原生弹出按钮
          plus.nativeUI.actionSheet(actionstyle, function (e) {
            if (e.index > 0) {
              console.log("用户点击了：" + actionbuttons[e.index - 1].title);
              if (actionbuttons[e.index - 1].title === "下载") {
                qmSdk.savePhotoToAlbum({
                  downloadurl: res.url,
                  success: (r) => {
                    console.log("保存成功", JSON.stringify(r));
                    alert("保存成功");
                  },
                  fail: (e) => {
                    console.log("保存失败", JSON.stringify(e));
                    alert("保存失败");
                  }
                })
              }
            } else {
              console.log("用户点击了：取消");
            }
          });
        }
      });
    }

  </script>
</body>

</html>
